<script setup lang="ts">
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";

const activeName = ref("0");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event);
};

//表格
const tableData = [
  {
    amountOrMemo: 0,
    applyDelivery: true,
    applyDeliveryDesc: "",
    balanceAmount: 0,
    commission: 0,
    currency: "",
    customerCompanyMobile: "",
    customerEmail: "",
    customerId: 0,
    customerInquirySn: "",
    customerMobile: "",
    daysOfCompletion: "",
    deliveryRefundDesc: "",
    deliveryStatus: true,
    depositDate: 0,
    depositRatio: 0,
    discount: "",
    ecompletionDate: 0,
    equipmentType: "",
    erpSalesOrderContract: {
      annex: "",
      contract: ""
    },
    erpSalesOrderDetails: {
      companyCastLogo: "",
      companyMaterialReq: "",
      companyPackage: "",
      companyPaint: "",
      customerCastLogo: "",
      customerMaterialReq: "",
      customerPackage: "",
      customerPaint: "",
      desc: "",
      other: "",
      qualityFeedback: ""
    },
    erpSalesOrderProducts: [
      {
        demand: 0,
        productCover: "",
        productName: "",
        productNumber: "",
        singleWeight: 0,
        stock: 0,
        totalSupportNumber: 0,
        totalVolumn: 0,
        trancactionPrice: 0
      }
    ],
    expressMode: "",
    firstCommission: 0,
    grossProfit: 0,
    grossProfitMargin: 0,
    id: 0,
    inquiryDate: 0,
    orderType: "",
    payableAmount: 0,
    photoMetrial: "",
    poNumber: "",
    rdp: "",
    receivableAmount: 0,
    receivingBank: "",
    sailingState: 0,
    salesId: 0,
    salesName: "",
    secondCommission: 0,
    sn: "",
    status: 0,
    termsAndFreight: "",
    termsOfPayment: ""
  }
];
</script>

<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="全部" name="0" />
      <el-tab-pane label="未生产" name="1" />
      <el-tab-pane label="生产中" name="2" />
      <el-tab-pane label="待发货" name="3" />
      <el-tab-pane label="发货中" name="4" />
      <el-tab-pane label="已处理" name="5" />
      <el-tab-pane label="售后" name="6" />
      <el-tab-pane label="延期" name="7" />
    </el-tabs>
    <el-card>
      <div>
        <div style="height: 50px; margin-top: 20px; margin-left: 5px">
          <span>订单编号:</span>
          <el-input style="width: 240px; margin-right: 8px" placeholder="请输入" />
          <span>客户名称:</span>
          <el-input style="width: 240px; margin-right: 8px" placeholder="请输入" />
          <span>销售人员:</span>
          <el-input style="width: 240px; margin-right: 8px" placeholder="请输入" />
          <el-button type="primary">查询</el-button>
          <el-button type="primary">重置</el-button>
        </div>
        <div style="height: 50px; margin-top: 10px; float: right">
          <el-button type="primary">创建订单</el-button>
        </div>
      </div>
    </el-card>
    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column fixed prop="date" label="Date" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="state" label="State" width="120" />
      <el-table-column prop="city" label="City" width="120" />
      <el-table-column prop="address" label="Address" width="600" />
      <el-table-column prop="zip" label="Zip" width="120" />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick">
            Detail
          </el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
